<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title th:text="${blog.title}">详情页</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
          th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/blogs.css" th:href="@{/css/blogs.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" th:href="@{https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/blog-xq.css" th:href="@{/css/blog-xq.css}">
</head>
<body>
<!-- 导航-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container navigation-nav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a th:href="@{/index}" id="logo" class="navbar-brand dd">流沙</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a th:href="@{/index}" class="m-l-20"><i class="el-icon-reading"></i>&nbsp;<span
                        class="hidden-md hidden-sm">博文</span></a></li>
                <li><a th:href="@{/type}" class="m-l-20"><i class="el-icon-user"></i>&nbsp;<span
                        class="hidden-md hidden-sm">分类</span></a></li>
                <li><a th:href="@{/news}" class="m-l-20"><i class="el-icon-bell"></i>&nbsp;<span
                        class="hidden-md hidden-sm">消息</span></a></li>
            </ul>
            <form class="nav navbar-nav navbar-form search" method="post" role="search" action="#"
                  th:action="@{/search}"
                  target="_blank">
                <div class="form-group input-group">
                    <input type="text" name="query" class="form-control" placeholder="搜索"
                           th:value="${query}">
                </div>

            </form>
            <ul class="nav navbar-nav navbar-right">
                <!--<li>-->
                <a th:href="@{/login}" type="button" class="btn btn-link btn-lg btn-login"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">登录</a>
                <!--</li>-->
                <!--<li>-->
                <a th:href="@{/registered}" type="button" class="btn btn-danger btn-lg btn-register"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">注册</a>
                <!--</li>-->

                <li class="dropdown" th:style="${session.user}==null ? 'display:none':'display:inline-block'" id="drop">
                    <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
                        <img th:src="@{/images/timg.jpg}" class="img-circle" alt=""
                             style="width: 40px;height: 40px;">
                        <!--<span class="nickname" th:text="${session.user.nickname}"></span>-->
                        <i class="glyphicon glyphicon-triangle-right"></i>
                    </a>
                    <ul class="dropdown-menu animate__animated animate__fadeInRight">
                        <li style="height: 40px!important;">
                            <a th:href="@{/homepage}"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;&nbsp;个人主页</a>
                        </li>
                        <li style="height: 40px!important;">
                            <a th:href="@{/logout}"><i class="glyphicon glyphicon-log-out"></i>&nbsp;&nbsp;&nbsp;退出</a>
                        </li>
                    </ul>
                </li>
                <!--<li>-->
                <a th:href="@{/post}" type="button" class="btn btn-info btn-lg btn-edit" th:style="${session.user}==null ? 'display:none':'display:inline-block'"><i
                        class="el-icon-edit"></i>写文章</a>
                <!--</li>-->
            </ul>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="middle container">
    <div class="aa row">
        <!--博客内容-->
        <div class="blog-contents col-lg-11 col-md-11 col-sm-11 col-xs-11">
            <div class="zheng" style="width: 100%;height: 100%;">
                <!--标题-->
                <div class="titles">
                    <h1 th:text="${blog.title}"></h1>
                </div>

                <!--用户 昵称 时间 flag-->
                <div class="use">
                    <!--<img src="https://upload-images.jianshu.io/upload_images/6533694-da2eb2c25d7dab8f.jpg"-->
                    <!--class="img-circle" style="height: 60px;width: 60px;" alt="头像">-->
                    <!--&lt;!&ndash;更新时间&ndash;&gt;-->
                    <!--<a href="#">-->
                    <!--<span>一世长安一世欢</span>-->
                    <!--</a>-->
                    <a href="#">
                        <i class="el-icon-date"></i>&nbsp;
                        <span th:text="${#dates.format(blog.updatetime,'yyyy-MM-dd')}"></span>
                    </a>
                    <!--浏览次数-->
                    <a href="#">
                        <i class="el-icon-ice-cream"></i>&nbsp;
                        <span>阅读次数</span>&nbsp;&nbsp;
                        <span th:text="${blog.views}"></span>
                    </a>
                </div>

                <!--&lt;!&ndash;图片&ndash;&gt;-->
                <!--<div class="img animate__animated animate__fadeIn">-->
                <!--<img th:src="@{${blog.firstpicture}}" alt="">-->
                <!--</div>-->

                <!--内容-->
                <div class="cont typo typo-p typo-h1 typo-h2 typo-pre animate__animated animate__fadeIn">
                    <div th:utext="${blog.content}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--赞赏-->
    <div class="appreciation bb row" th:if="${blog.appreciation}">
        <div class="blog-contents col-lg-11 col-md-11 col-sm-11 col-xs-11">
            <p class="p2">还没人赞赏，支持一下!</p>
            <p class="p1">"小礼物走一走!"</p>
            <a type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">
                <i class="glyphicon glyphicon-jpy"></i>
                赞赏</a>
            <p class="p3">记得关注我哦!</p>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">谢谢支持！</h4>
                        </div>
                        <div class="modal-body">
                            <img th:src="@{/images/wx.jpg}" alt="" width="100" height="100">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <img th:src="@{/images/zf.jpg}" alt="" width="100" height="100">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--评论-->
    <div class="cc row" th:if="${blog.commenttabled}">
        <div class="blog-contents col-lg-11 col-md-11 col-sm-11 col-xs-11">
            <div class="ui bottom attached segment">
                <div id="comment-container" class="ui teal">
                    <div th:fragment="commentList">
                        <div class="ui threaded comments">
                            <h3 class="ui dividing header">全部评论</h3>
                            <div class="comment" th:each="comment : ${comments}">
                                <a class="ui avatar circular image">
                                    <img src="https://n.sinaimg.cn/sinacn10115/439/w641h598/20200214/4a9b-ipmxpvz8164848.jpg"
                                         th:src="@{${comment.avatar}}">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${comment.nickname}">马特</span>
                                        <div class="ui mini basic orange left pointing label"
                                             th:if="${comment.blogger}">博主
                                        </div>
                                    </a>
                                    <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(comment.createtime,'yyyy-MM-dd HH:mm')}">今天下午5:42</span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">多么艺术！</div>
                                    <div class="actions">
                                        <a class="reply" data-commentid="1" data-commentnickname="马特"
                                           th:attr="data-commentid=${comment.commentId},data-commentnickname=${comment.nickname}"
                                           onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                    <div class="comment" th:each="reply : ${comment.replyComments}">
                                        <a class="ui avatar circular image">
                                            <img src="https://n.sinaimg.cn/sinacn10115/439/w641h598/20200214/4a9b-ipmxpvz8164848.jpg"
                                                 th:src="@{${reply.avatar}}">
                                        </a>
                                        <div class="content">
                                            <a class="author">
                                                <span th:text="${reply.nickname}">一世长安</span>
                                                <div class="ui mini basic orange left pointing label"
                                                     th:if="${reply.blogger}">博主
                                                </div>
                                            </a>
                                            <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(reply.createtime,'yyyy-MM-dd HH:mm')}">今天下午5:42</span>
                                            </div>
                                            <div class="text">
                                                <a>
                                                     <span th:text="|@ ${reply.parentComment.nickname}|"
                                                           class="t-mm">@ 红尘陌上</span>
                                                </a>
                                                <span th:text="${reply.content}">多么艺术！</span>
                                            </div>
                                            <div class="actions">
                                                <a class="reply" data-commentid="1" data-commentnickname="马特"
                                                   th:attr="data-commentid=${reply.commentId},data-commentnickname=${reply.nickname}"
                                                   onclick="reply(this)">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div id="comment-form" class="ui form">
                    <input type="hidden" name="blog.blogId" th:value="${blog.blogId}">
                    <input type="hidden" name="parentComment.commentId" th:value="-1">
                    <div class="field" style="text-align: left!important;">
                        <textarea name="content" placeholder="请输入评论信息......"></textarea>
                    </div>
                    <div class="fields">
                        <div class="field">
                            <input type="hidden" name="nickname" placeholder="昵称"
                                   th:value="${session.user}!=null ? ${session.user.nickname}">
                        </div>
                        <div class="field" style="text-align: right!important;">
                            <a class="ui circular image" style="width: 45px!important;height: 45px!important;">
                                <img src="https://n.sinaimg.cn/sinacn10115/439/w641h598/20200214/4a9b-ipmxpvz8164848.jpg">
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button id="comment-post" type="button" class="ui orange basic button">发布
                            </button>&nbsp;&nbsp;
                            <button type="button" class="ui olive basic button">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="btn-group-vertical m-fixed m-right-bottom m-padded">
    <a href="#" type="button" class="btn btn-default">
        <i class="el-icon-arrow-up"></i>
    </a>

    <a id="togbook" type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-qrcode"></i>
    </a>
</div>


<div class="m-fixed m-right-bottom-1" id="qrCode">
    <span>手机扫码！</span>
    <hr>
</div>

<div style="width: 100%;height: 100px"></div>


<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="../static/js/jquery.scrollTo.min.js"
        th:src="@{/js/jquery.scrollTo.min.js}"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="../static/js/blogs.js" th:src="@{/js/blogs.js}"></script>
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"
        th:src="@{https://unpkg.com/element-ui/lib/index.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js}"></script>
<script type="text/javascript" src="../static/lib/qrcode/qrcode.min.js"
        th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script type="text/javascript" src="../static/js/jquerysession.js" th:src="@{/js/jquerysession.js}"></script>

<script th:inline="javascript">

    $("#togbook").on('mouseover', function () {
        $("#qrCode").show();
    });

    $("#togbook").on('mouseout', function () {
        $("#qrCode").hide();
    });


    var serUrl = /*[[#{blog.serurl}]]*/"172.18.37.14:8080";
    var url = /*[[@{/blog/{blogId}(blogId=${blog.blogId})}]]*/"";

    var qrCode = new QRCode("qrCode", {
        text: serUrl + url,
        width: 100,
        height: 100,
        colorDark: "#ffa309",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });


    $(function () {
        $("#comment-container").load(/*[[@{/comments/{blogId}(blogId=${blog.blogId})}]]*/"");
    });

    $('#comment-post').click(function () {
        var boo = $('.ui .form').form('validate form');
        if (boo) {
            console.log("成功");
            postData()
        } else {
            console.log("失败")
        }
    });

    function postData() {
        $("#comment-container").load(/*[[@{/comments}]]*/ "", {
            "parentComment.commentId": $("[name='parentComment.commentId']").val(),
            "blog.blogId": $("[name='blog.blogId']").val(),
            "nickname": $("[name='nickname']").val(),
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {
            // $(window).scrollTo($('#comment-container'), 500);
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.commentId']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息.....");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickame = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@" + commentNickame).focus();
        $("[name='parentComment.commentId']").val(commentId);
        $(window).scrollTo($('#comment-form'), 500);
    }
</script>
</body>
</html>
